﻿
<!--
https://github.com/netnr
https://gitee.com/netnr
https://www.netnr.com
https://zme.ink
-->


<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel='shortcut icon' href='/favicon.ico' type='image/x-icon' />


    <title>文件转Base64 脚本服务</title>

    <meta name="keywords" content="netnr NET牛人 文件转Base64" />
    <meta name="description" content="Script Services Base64编码转换" />

</head>
<body>
<div id='LoadingMask' style='position:fixed;top:0;left:0;bottom:0;right:0;background-color:white;z-index:19999;background-image:url('/images/loading.svg');background-repeat:no-repeat;background-position:48% 45%'></div>
<link href='https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css' rel='stylesheet'>
<script src='https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/jzjs@2.0.2/2.0.2/jz.min.js'></script>
<link href='https://cdn.jsdelivr.net/npm/netnrnav@1.1.0/src/netnrnav.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/netnrnav@1.1.0/src/netnrnav.js' defer async></script>

<script>
    $.ajax({
        url: '/images/icon.svg?20201228',
        dataType: 'text',
        success: function (data) {
            $('body').append('<div class="d-none">' + data + '</div>')
        }
    })
</script>

        <link href="/css/global.css?v=YuzFOH_Z7ma5bs-3HMdZQu0aPQZ1pkBqrzQ_Ri8Yh3k" rel="stylesheet" />
        <script src="/js/global.js?v=ckkNo3hER74SKnNCuouMgEfxEpEMP3phtPl9uA0_Lnc"></script>
            <!--导航-->
            <button type="button" class="MenuToggle show-in-mobile btn btn-primary ml-3 mt-3">
                <span class="fa fa-align-justify fa-2x"></span>
            </button>
            <div class="netnrnav horizontal">
                <div class="netnrnav-wrapper">
                    <ul>
                        <li><a href="https://www.netnr.com" class="siteIcon"><img src="/favicon.svg" /> 首页</a></li>
                        <li><a href="https://www.netnr.com/gist/discover" title="代码片段"><span class="fa fa-fw fa-file-code-o"></span> Gist</a></li>
                        <li><a href="https://www.netnr.com/run/discover" title="在线运行代码"><span class="fa fa-fw fa-play"></span> Run</a></li>
                        <li><a href="https://www.netnr.com/doc" title="文档管理"><span class="fa fa-fw fa-book"></span> Doc</a></li>
                        <li><a href="https://www.netnr.com/draw/discover" title="绘制"><span class="fa fa-fw fa-paint-brush"></span> Draw</a></li>
                        <li><a href="/" title="ss.js.org"><span class="fa fa-fw fa-wrench"></span> 服务</a></li>
                        <li style="background-image: radial-gradient(ellipse, white, rgb(227, 248, 240))">
                            <!--标题-->
                                <a href='javascript:location.reload(false)' title="Base64编码转换">
                                    <svg class="titleicon"><use xlink:href="#code"></use></svg> &#x6587;&#x4EF6;&#x8F6C;Base64
                                </a>
                        </li>
                        <li>
                            <a class="text-muted"><span class="fa fa-fw fa-ellipsis-h"></span></a>
                            <ul>
                                <li><a target="_blank" title="码云" href="https://gitee.com/netnr"><i class="fa fa-fw fa-git"></i> Gitee <sup><i class="fa small fa-external-link"></i></sup></a></li>
                                <li><a target="_blank" title="GitHub" href="https://github.com/netnr"><i class="fa fa-fw fa-github"></i> GitHub <sup><i class="fa small fa-external-link"></i></sup></a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        <div class="min300 mt-3">
            <div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <label class="btn btn-success mb-0">
                <input type="file" class="d-none" id="txtFile" /> 选择（拖拽）文件
            </label>
            <label id="labSize" class="ml-3"></label>
        </div>
        <div class="col-md-12 my-2">
            <textarea class="form-control min300" id="txtBase64"></textarea>
        </div>
        <div class="col-md-12 mb-2">
            <button class="btn btn-success" id="btnBase64ToFile">Base64转文件</button>
            <div id="viewBase64" class="mt-3"></div>
        </div>
    </div>
</div>

<script>
    //拖拽
    $(document).on("dragleave dragenter dragover", function (e) {
        if (e && e.stopPropagation) { e.stopPropagation() } else { window.event.cancelBubble = true }
        if (e && e.preventDefault) { e.preventDefault() } else { window.event.returnValue = false }
    }).on("drop", function (e) {
        if (e && e.preventDefault) { e.preventDefault() } else { window.event.returnValue = false }
        e = e || window.event;
        var files = (e.dataTransfer || e.originalEvent.dataTransfer).files;
        if (files && files.length) {
            fileAsBase64(files[0])
        }
    });

    $('#txtFile').change(function () {
        if (this.files.length) {
            fileAsBase64(this.files[0])
            $('#txtFile').val('')
        }
    });

    function fileAsBase64(file) {
        if (file.size / 1024 / 1024 > 3) {
            var msgs = [
                "<div style='font-size:1rem'>",
                "正在处理，请稍等，^_^",
                "<hr/>",
                "文件较大，浏览器会出现卡顿的情况",
                "</div>"
            ];
            jz.alert(msgs.join('<br/>'), { time: 5, ok: false })
        }

        var r = new FileReader();
        r.onload = function () {
            $('#txtBase64').val(this.result)
            $('#labSize').html("大小：" + (this.result.length / 1024).toFixed(1) + " K");
        }
        r.readAsDataURL(file);
    }

    function base64AsBlob(code) {
        var parts = code.split(';base64,');
        var contentType = parts[0].split(':')[1];
        var raw = window.atob(parts[1]);
        var rawLength = raw.length;
        var uInt8Array = new Uint8Array(rawLength);
        for (var i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {
            type: contentType
        });
    };

    $('#btnBase64ToFile').click(function () {
        var code = $('#txtBase64').val();
        var blob = base64AsBlob(code);
        console.log(blob);
        var vbase = $('#viewBase64'), vnode;
        vbase.html('');
        if (blob.type.indexOf("image") >= 0) {
            vnode = document.createElement("img");
        }
        if (blob.type.indexOf("audio") >= 0) {
            vnode = document.createElement("audio");
            vnode.controls = true;
        }
        if (blob.type.indexOf("video") >= 0) {
            vnode = document.createElement("video");
            vnode.controls = true;
        }
        if (vnode) {
            vnode.src = URL.createObjectURL(blob);
        } else {
            vnode = document.createElement("a");
            vnode.href = URL.createObjectURL(blob);
            vnode.innerHTML = "下载";
        }
        vnode.style.maxWidth = "100%";
        vbase.append(vnode);
    });

    $(window).on('load', function () {
        if (typeof (FileReader) === 'undefined') {
            jz.alert("你的浏览器不支持 FileReader <br />请使用现代浏览器操作！");
            $('#txtFile')[0].disabled = true;
        }
    })
</script>
        </div>
        <a href="javascript:ss.toTop();" class="totop" title="返回顶部">ˆ</a>
</body>
</html>
